<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>双向数据绑定实现</title>
	</head>
	<body>
		<input type="text" id="input" />
		<div id="box"></div>
		<script>
			let obj = {}
			let input = document.getElementById('input')
			let box = document.getElementById('box')
			//数据劫持
			Object.defineProperty(obj, 'text', {
				configurable: true, //可以改变属性, 例如删除
				enumerable: true, //可枚举属性
				get() {
					//获取到数据就直接拿
					console.log('获取数据了')
				},
				set(newVal) {
					//修改数据就重新赋值
					console.log('数据更新了')
					input.value = newVal
					box.innerHTML = newVal
				},
			})
			//输入监听
			input.addEventListener('keyup', function (e) {
				obj.text = e.target.value
			})
		</script>
	</body>
</html>
